<template>
  <!-- 内容 -->
  <div class="main">
    <!-- 网站UV -->
    <div class="container pl-5 pr-5 pt-3 pb-3 mt-3">
      <h6 class="mt-3"><b class="square"></b> 网站 UV</h6>
      <form class="form-inline mt-3">
        <input type="date" class="form-control" required v-model="uvStartDate" />
        <input type="date" class="form-control ml-3" required v-model="uvEndDate" />
        <button type="button" class="btn btn-primary ml-3" @click="getUV">开始统计</button>
      </form>
      <ul class="list-group mt-3 mb-3">
        <li class="list-group-item d-flex justify-content-between align-items-center">
          统计结果
          <span class="badge badge-primary badge-danger font-size-14">{{ uv }}</span>
        </li>
      </ul>
    </div>
    <!-- 活跃用户 -->
    <div class="container pl-5 pr-5 pt-3 pb-3 mt-4">
      <h6 class="mt-3"><b class="square"></b> 活跃用户</h6>
      <form class="form-inline mt-3">
        <input type="date" class="form-control" required v-model="dauStartDate" />
        <input type="date" class="form-control ml-3" required v-model="dauEndDate" />
        <button type="button" class="btn btn-primary ml-3" @click="getDAU">开始统计</button>
      </form>
      <ul class="list-group mt-3 mb-3">
        <li class="list-group-item d-flex justify-content-between align-items-center">
          统计结果
          <span class="badge badge-primary badge-danger font-size-14">{{ dau }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Visit from '@/api/visit'
import { useDateFormat } from '@vueuse/core'

const uv = ref(0)

const dau = ref(0)

const today = useDateFormat(new Date(), 'YYYY-MM-DD')

const uvStartDate = ref(today)

const uvEndDate = ref(today)

const dauStartDate = ref(today)

const dauEndDate = ref(today)

const getUV = async () => {
  Visit.getUV(uvStartDate.value, uvEndDate.value).then(res => {
    uv.value = res
  })
}

const getDAU = async () => {
  Visit.getDAU(dauStartDate.value, dauEndDate.value).then(res => {
    dau.value = res
  })
}
</script>
